<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
    <title>Student Website</title>
</head>
<body>
<div class="navbar">
        <span class="title">
            <a href="/" style="text-decoration: none; color: black">Back To Main Page</a>
        </span>
</div>
<a onclick="window.history.go(-1)">Back</a>
<div class="card" style="height: auto">
    <h2> Sent Message </h2>
    <p id='chat_content_list'></p>
    <div id="chat_box" style="height: 50%">
        <label for="inputTo"></label>
        <input type="text" id="inputTo" class="input" placeholder="To: (Name)"><br><br>
        <textarea style="width: 92%; height: 70%; overflow-y: auto; resize: none;padding: 10px; font-family: Arial;
        border: 1px solid #cccccc; border-radius: 5px; font-size: 16px" placeholder="Content" name="chatInput"
                  id="chatInput"></textarea>
    </div>
    <div align="right" id="sentMsg">
        <button class="button" onclick="clearTextArea()">Clear</button>
        <button class="button" onclick="sent()">Sent</button>
    </div>
</div>

</body>

<script>
    let username;
fetch('/api/get_user_name')
    .then(response => {
        if (!response.ok) {
            throw new Error("Network error")
        }
        return response.text();
    })
    .then(data => {
        username = data;
        return fetch(`api/users/${username}`, {
            method: 'GET',
        });
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTP error');
        }
        return response.json();
    })
    .then(user => {
        userType = user.type; // 这里是假设你的用户 API 返回一个包含 type 属性的对象
        return fetch(`api/get_chat_msg?username=${encodeURIComponent(username)}`);
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTP error');
        }
        return response.json();
    })
    .then(chat_msg => {
        let chat_content_list = document.getElementById("chat_content_list");
        let resultHTML = "<div>"
        chat_msg.data.forEach(msg => {
            resultHTML += `<p style="line-height: 10px; font-weight: bold">
            >>From: ${msg[2]} To: ${msg[1]}<<     ${msg[4]}
            </p>
            <p style="line-height: 10px;">${msg[3]}</p>`
        });
        resultHTML += "</div><hr>";
        chat_content_list.innerHTML = resultHTML;
    })
    .catch(error => {
        console.error('Error: ', error);
    });


    function sent() {
        const from = username;
        const to = document.getElementById("inputTo").value
        const content = document.getElementById("chatInput").value

        fetch('api/post_chat_msg', {
            method: 'POST',
            headers: {
                'Content-type': 'application/json'
            },
            body: JSON.stringify({from: from, to: to, content: content})
        })
            .then(response => {
                if (response.ok) {
                    window.location.reload()
                } else {
                    alert('can\'t sent message!')
                }
            })
            .catch(error => {
                console.log('error:', error)
            })
    }

    function clearTextArea() {
        document.getElementById("chatInput").value = "";
    }
</script>
</html>